import * as React from 'react';

export function Tip({ type = 'primary', children, style = {} }) {
  const typeMap: { [key: string]: string } = {
    primary: 'Tip',
    warning: 'Caution',
    success: 'Success',
    error: 'Warning',
    info: 'Note',
  };

  const typeColorMap: { [key: string]: string } = {
    primary: 'var(--color-geekblue-9)',
    warning: 'var(--color-orange-8)',
    success: 'var(--color-green-8)',
    error: 'var(--color-red-8)',
    info: 'var(--color-gray-8)',
  };

  return (
    <div className={type + ' tip'} style={style}>
      <div className="title">{typeMap[type]}</div>
      <div className="tip-content">{children}</div>
      <style jsx>{`
        .tip {
          padding: 12px 16px;
          border-radius: 0px;
          width: 100%;
          margin: 12px 0px;
        }
        .primary {
          border-left: 5px solid var(--color-geekblue-9);
          background-color: var(--color-geekblue-1);
        }
        .warning {
          border-left: 5px solid var(--color-orange-5);
          background-color: var(--color-orange-1);
        }
        .success {
          border-left: 5px solid var(--color-green-6);
          background-color: var(--color-green-1);
        }
        .error {
          border-left: 5px solid var(--color-red-6);
          background-color: var(--color-red-1);
        }
        .info {
          border-left: 5px solid var(--color-gray-6);
          background-color: var(--color-gray-2);
        }
        .title {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 8px;
          color: ${typeColorMap[type]};
        }
        .tip-content > p{
          font-size: 14px;
        }
      `}</style>
    </div>
  );
}
